import { Button as BaseButton } from 'antd';
import { createStyles } from 'antd-style';
import { GetProps } from 'antd/lib';

const useStyles = createStyles({
  iconSize: {
    fontSize: 20,
  },
  btnSize: {
    fontSize: 11,
  },
});

export function Button({
  icon,
  children,
  ...props
}: GetProps<typeof BaseButton>) {
  const { styles, cx } = useStyles();

  return (
    <BaseButton className="h-auto align-middle" type="text" {...props}>
      <div className="flex flex-col items-center justify-center">
        <span className={cx(styles.iconSize, 'leading-none')}>{icon}</span>
        <span className={styles.btnSize}>{children}</span>
      </div>
    </BaseButton>
  );
}
